<template>
  <body>
    <h3>来说说你在做什么想什么</h3>
    <div id="smasrc">
      <div class="smsrc">
        <img
          :src="item.src"
          alt=""
          @click="src(item, i)"
          v-for="item in lj"
          :key="item"
        />
        <!-- <img
          src="https://i01piccdn.sogoucdn.com/38421404b4d48d79"
          alt=""
          @click="src"
        />
        <img
          src="https://i01piccdn.sogoucdn.com/5f97030d97e38773"
          alt=""
          @click="src"
        />
        <img
          src="https://img01.sogoucdn.com/app/a/100520093/8379901cc65ba509-45c21ceb904429fc-1e16d8c0bc48a98cc6ba4e41d4b88a44.jpg"
          alt=""
          @click="src"
        />
        <img
          src="https://img01.sogoucdn.com/app/a/100520093/8379901cc65ba509-45c21ceb904429fc-4ac1f58edc3ca2ad43ac5eea3b406500.jpg"
          alt=""
          @click="src"
        />
        <img
          src="https://img01.sogoucdn.com/app/a/100520093/8379901cc65ba509-45c21ceb904429fc-e8e0ced72c7814e527ca276e0fe48673.jpg"
          alt=""
          @click="src"
        />
        <img
          src="https://img01.sogoucdn.com/app/a/100520093/8379901cc65ba509-45c21ceb904429fc-fffc7639a9a4d453515b56b6c1a3fc58.jpg"
          alt=""
          @click="src"
        />
        <img
          src="https://img01.sogoucdn.com/app/a/100520093/8379901cc65ba509-45c21ceb904429fc-d7500b9f247a7ac06c65928ec07daad9.jpg"
          alt=""
          @click="src"
        /> -->
      </div>
      <textarea
        name=""
        id=""
        cols="30"
        rows="10"
        maxlength="140"
        v-model="msg"
        @input="inp"
      >
      </textarea>
      <button @click="bro()">广播</button>
      <div class="show">
        <div class="top"><span>大家都说</span></div>
        <ul class="content">
          <li v-for="i in arr" :key="i">
            <img :src="i.luj" alt="" />
            <span
              >{{ i.name }}<i>{{ me }}</i></span
            >
          </li>
        </ul>
      </div>
    </div>
    <span id="ip">还能输入{{ num }}个字</span>
  </body>
</template>
<script>
export default {
  data() {
    return {
      msg: "",
      num: 0,
      st: "",
      arr: [],
      data: "",
      time: "",
      ri: "",
      hous: "",
      miu: "",
      me: "",
      y: "",
      r: "",
      i: "",
      lu: "",
      lj: [
        {
          src: "https://img01.sogoucdn.com/app/a/100520093/8379901cc65ba509-45c21ceb904429fc-1e16d8c0bc48a98cc6ba4e41d4b88a44.jpg",
        },
        {
          src: "https://img01.sogoucdn.com/app/a/100520093/8379901cc65ba509-45c21ceb904429fc-4ac1f58edc3ca2ad43ac5eea3b406500.jpg",
        },
        {
          src: "https://img01.sogoucdn.com/app/a/100520093/8379901cc65ba509-45c21ceb904429fc-e8e0ced72c7814e527ca276e0fe48673.jpg",
        },
        {
          src: "https://img01.sogoucdn.com/app/a/100520093/8379901cc65ba509-45c21ceb904429fc-fffc7639a9a4d453515b56b6c1a3fc58.jpg",
        },
        {
          src: "https://img01.sogoucdn.com/app/a/100520093/8379901cc65ba509-45c21ceb904429fc-d7500b9f247a7ac06c65928ec07daad9.jpg",
        },
        {
          src: "https://img0.baidu.com/it/u=1003057317,3674617849&fm=26&fmt=auto&gp=0.jpg",
        },
        {
          src: " https://img1.baidu.com/it/u=3524942861,79151534&fm=26&fmt=auto&gp=0.jpg",
        },
      ],
    };
  },
  methods: {
    inp() {
      this.num = 140 - this.msg.length;
    },
    bro() {
      this.st = this.msg;
      
      this.data = new Date();
      this.time = this.data.getMonth() + 1; //月
      this.y = this.time < 10 ? "0" + this.time : this.time;
      this.ri = this.data.getDate(); //日
      this.r = this.ri < 10 ? "0" + this.ri : this.ri;
      this.hous = this.data.getHours(); //时
      this.min = this.data.getMinutes(); //分
      this.me = this.y + "月" + this.r + "日" + this.hous + ":" + this.min;
      this.arr.push({ name: this.st, luj:this.lu});
    },
    src(item) {
      this.lu = item.src;
    },
  },
};
</script>
<style lang="css">
* {
  margin: 0;
  padding: 0;
}
body {
  width: 500px;
  height: 600px;
  border: 1px solid #000;
  margin: 0 auto;
  position: relative;
}
#ip {
  position: absolute;
  right: 150px;
  top: 225px;
}
h3 {
  margin-left: 20px;
}
#smasrc {
  width: 460px;
  height: 50px;
  margin: 0 auto;
  border: 1px solid #000;
}
.smsrc {
  width: 400px;
  height: 50px;
  float: right;
}
.smsrc img {
  float: left;
  width: 50px;
  height: 50px;
}
textarea {
  width: 460px;
  height: 100px;
  resize: none;
  margin: 30px auto;
  outline: none;
}
button {
  width: 120px;
  height: 30px;
  background: #89c232;
  border: none;
  border-radius: 5px;
  color: #fff;
  position: absolute;
  right: 20px;
  top: 220px;
}
.show {
  width: 460px;
  height: 230px;
  border: 1px solid #000;
  margin: 30px auto;
}
.top {
  width: 100%;
  height: 40px;
  background: #e3eaec;
  position: relative;
}
.top span {
  width: 75px;
  height: 30px;
  background: #ffffff;
  text-align: center;
  line-height: 30px;
  position: absolute;
  left: 5px;
  top: 10px;
  white-space: nowrap;
}
ul {
  width: 460px;
  height: 186px;
  border: 1px solid #000;
}
li {
  width: 100%;
  height: 50px;
  border-width: 1px;
  border-bottom-style: dashed;
  list-style: none;
  position: relative;
}
li span {
  display: block;
  margin-left: 60px;
  height: 40px;
  position: absolute;
  left: 60px;
  top: 5px;
}
li span i {
  display: block;
  font-size: 13px;
  margin-top: 2px;
  font-style: normal;
}
li img {
  width: 50px;
  height: 50px;
}
</style>
